<template>
  <div style="margin-bottom: 30px">
    <el-checkbox-group
        v-model="selectedItems"
    >
      <el-checkbox border v-for="item in items" @change="clean" :key="item" :value="item"
                   style="height: 50px;width: 180px;margin: 5px">
        <img :src="'/icon/'+item+'.png'" style="width: 40px; height: 40px;">
        <el-text size="large" style="font-size:16px;line-height:35px;width: 80px;height: 40px;text-align: center">
          {{ item }}
        </el-text>
      </el-checkbox>
    </el-checkbox-group>
  </div>
  <el-divider/>
  <skill-lottery ref="skillRef" :skill="items"/>
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue'
import resource from '@/assets/resource.json'
import SkillLottery from "@/components/icons/skillLottery.vue";

const prop = defineProps({
  job: null
})
const skillRef = ref(null)
const selectedItems = ref([])
const items = ref([])

const clean = () => {
  // skillRef.value.clean()
}

const getValueByTag = (tag: any | unknown, data: any): any => {
  // 检查输入数据是否为对象
  if (typeof data !== 'object' || data === null) {
    return null;
  }

  // 遍历对象的键值对
  for (const key in data) {
    // 如果键与输入的tag匹配
    if (key === tag) {
      // 返回与该tag对应的值
      return data[key];
    }
    // 如果值是一个对象,递归调用该方法
    else if (typeof data[key] === 'object' && data[key] !== null) {
      const result = getValueByTag(tag, data[key]);
      if (result !== null) {
        return result;
      }
    }
  }

  // 如果没有找到与tag匹配的键,返回null
  return null;
}

const changeItems = () => {
  console.log(prop.job?.value)
  items.value = getValueByTag(prop.job?.value, resource);
  selectedItems.value = items.value
  skillRef.value.clean()
}

defineExpose({
  changeItems
})
</script>
<style scoped>
</style>